<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<div id="app">
		<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
		<button-counter></button-counter>
	</div>
	<script>
		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li>{{ todo.text }}</li>'
		})

		Vue.component('button-counter', {
			//内部维护data才能保证不会串
			data: function () {
				return {
					count: 0
				}
			},
			template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
		})

		var app = new Vue({
			el: '#app',
			data: {
				groceryList: [
					{ id: 0, text: '蔬菜' },
					{ id: 1, text: '奶酪' },
					{ id: 2, text: '随便其它什么人吃的东西' }
				]
			}
		})
	</script>
</body>

</html>